import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import { Layout, Menu, Typography } from 'antd';
import { FolderOpenOutlined , FundProjectionScreenOutlined , DashboardOutlined  } from '@ant-design/icons';

const { Header, Sider, Content } = Layout;
const { Title } = Typography;

const LayoutPage = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const selectedKey = location.pathname === '/' ? '/home1' : location.pathname;

  const handleMenuClick = (e: { key: string }) => {
    navigate(e.key);
  };

  return (
    <Layout style={{ minHeight: '100vh' }} className='layoutOne'>
      <Sider theme="light" width={200}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '64px', borderBottom: '1px solid #f0f0f0' }}>
          <Title level={4} style={{ margin: 0 }}>推广中心</Title>
        </div>
        <Menu
          mode="inline"
          selectedKeys={[selectedKey]}
          onClick={handleMenuClick}
          style={{ height: 'calc(100vh - 64px)', borderRight: 0 }}
        >
          <Menu.Item key="/appear" icon={<DashboardOutlined  />}>
            仪表盘
          </Menu.Item>
          <Menu.SubMenu key="datadata-visualization" icon={<FundProjectionScreenOutlined  />} title="数据视觉图表">
            <Menu.Item key="/home2">分析页</Menu.Item>
            <Menu.Item key="/about">多维数据分析</Menu.Item>
          </Menu.SubMenu>
          <Menu.SubMenu key="data-report" icon={<FolderOpenOutlined  />} title="推广记录">
            <Menu.Item key="/home3">历史记录</Menu.Item>
          </Menu.SubMenu>

          <Menu.SubMenu key="data-video" icon={<FolderOpenOutlined  />} title="模拟窗口">
            <Menu.Item key="/video-feed">短视频</Menu.Item>
          </Menu.SubMenu>

          <Menu.Item key="/home1">个人中心</Menu.Item>
        </Menu>
      </Sider>
      <Layout>
        <Header style={{ background: '#fff', padding: '0 20px', borderBottom: '1px solid #f0f0f0', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
 
        </Header>
        <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', height: 'calc(100vh - 130px)', overflow: 'auto' }}>
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default LayoutPage
